// 使用地方较多
.course-wide-list {
  list-style: none;
  margin: 0;
  padding:0;
  .course-item {
    border: 1px solid #ddd;
    margin-bottom: 20px;
    border-radius: 5px;
    &:hover {
      background: #f9f9f9;
    }
  }
  .course-picture-link {
    float: left;
    @media (max-width: 600px) {
      float: none;
      display: block;
    }
  }
  .course-picture {
    width: 230px;
    .border-top-left-radius();
    .border-bottom-left-radius();
     @media (max-width: 600px) {
      display: block;
      width: 100%;
    }
  }
  &.sortable-list {
    .course-picture {
      .border-radius(0);
    }
  }
  .course-body {
    margin: 15px 15px 0px 245px;
    @media (max-width: 600px) {
      margin-left: 15px;
      margin-bottom: 15px;
    }
  }
  .course-price {
    color: #e57259;
    font-size: 16px;
  }
  .course-price-info {
    float: right;
  }
  .course-title {
    margin: 10px 0 10px;
    word-break: break-all;
    a {
      color: #555;
      font-weight: bold;
    }
    .course-title__plan {
      font-size: 12px;
      line-height: 1;
    }
  }
  .course-metas {
    float: right;
    text-align: right;
    margin-top: 10px;
  }
  .course-about {
    margin: 0 0 15px;
    color: #666;
  }

  .teacher {
    float: left;
    width: 180px;
  }
  .teacher-avatar {
    float: left;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 3px;
    margin-right: 5px;
  }
  .teacher-nickname {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1;
    font-weight: bold;
    color: #555;
  }
  .teacher-title {
    color: #777;
    font-size: 12px;
    line-height: 1;
  }

  .divider {
    width: 1px;
    border-left: 1px solid #ccc;
    margin: 0 5px;
  }
}

.courses-selected {
  .course-body {
    margin: 15px 15px 0px 300px;
  }
}
